import React from 'react'
import PropTypes from 'prop-types'
import { Form, Input, Modal, Select } from 'antd'

const FormItem = Form.Item

const formItemLayout = {
  labelCol: {
    span: 6,
  },
  wrapperCol: {
    span: 14,
  },
}

const ProcessTypeModal = ({
  dispatch,
  item = {},
  onOk,
  systemprocessSelectOption,
  onCancel,
  visible,
  form: {
    getFieldDecorator,
    validateFields, setFieldsValue,
    getFieldsValue,
  },
  ...modalProps
}) => {
  const handleOk = () => {
    validateFields((errors) => {
      if (errors) {
        return
      }
      const data = {
        ...getFieldsValue(),
        key: item.key,
      }
      onOk(data)
    })
  }
  const cancelModelHandler = () => {
    onCancel()
  }
  const modalOpts = {
    ...modalProps,
    onOk: handleOk,
    onCancel,
  }
  const handleChange = (value) => {
    console.log(`selected ${value}`)
  }
  return (
    <Modal
      title="业务类型"
      onOk={handleOk}
      onCancel={cancelModelHandler}
      visible={visible}
      {...modalOpts}
    >
      <Form layout={'horizontal'} onSubmit={handleOk}>
        <FormItem
          {...formItemLayout}
          label="部门"
        >
          {
            getFieldDecorator('unit', {})(<Input />)
          }
        </FormItem>
        <FormItem
          {...formItemLayout}
          label="业务编号"
        >
          {
            getFieldDecorator('bizCode', {
              rules: [{ required: true, message: '业务编号长度最大10,最小1!', max: 10, min: 1 }],

            })(<Input />)
          }
        </FormItem>
        <FormItem
          {...formItemLayout}
          label="业务名称"
        >
          {
            getFieldDecorator('bizName', {
              rules: [{ required: true, message: '业务名称长度最大10,最小1!', max: 10, min: 1 }],
            })(<Input />)
          }
        </FormItem>
        <FormItem
          {...formItemLayout}
          label="主题"
        >
          {
            getFieldDecorator('subject', {
              rules: [{ required: true, message: '主题长度最大10,最小1!', max: 10, min: 1 }],
            })(<Input />)
          }
        </FormItem>
        <FormItem
          {...formItemLayout}
          label="系统名称"
        >
          {
            getFieldDecorator('systemCode', {
              rules: [{ required: true, message: '系统名称不能为空!' }],
            })(<Select allowClear onChange={handleChange}>
              {systemprocessSelectOption}
            </Select>)
          }
        </FormItem>
      </Form>
    </Modal>
  )
}
ProcessTypeModal.propTypes = {
  dispatch: PropTypes.func,
  form: PropTypes.object.isRequired,
  type: PropTypes.string,
  systemprocessSelectOption: PropTypes.array,
  item: PropTypes.object,
  onOk: PropTypes.func,
  onCancel: PropTypes.func,
  visible: PropTypes.bool,
}

export default Form.create()(ProcessTypeModal)
